<template>
  <div id="ContactUs">
    <div class="banner container-fuild text-center">询价</div>
    <div class="container">
      <div class="container-fuild ContactUs-container">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-6">
            <!-- <form class="form-horizontal" role="form">
              <div class="form-group">
                <label for="name" class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10 col-xs-12">
                  <input type="text" class="form-control" id="name" placeholder="请输入名字">
                </div>
              </div>
              <div class="form-group">
                <label for="email" class="col-sm-2 control-label">邮箱</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="email" placeholder="请输入邮箱">
                </div>
              </div>
              <div class="form-group">
                <label for="tel" class="col-sm-2 control-label">电话</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="tel" placeholder="请输入电话">
                </div>
              </div>
              <div class="form-group">
                <label for="content" class="col-sm-2 control-label">内容</label>
                <div class="col-sm-10">
                  <textarea class="form-control" id="content" rows="8" placeholder="请输入内容"></textarea>
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <button type="submit" class="btn btn-default btn-block">提交</button>
                </div>
              </div>
            </form> -->
            <van-cell-group>
  <van-field v-model="cp_name" label="产品名称" placeholder="请输入产品名称" />
   <van-field v-model="cp_call" label="联系方式" placeholder="请输入联系方式" />
</van-cell-group>
  
   <el-upload
        name="upFile"
        class="upload-demo"
        action="http://manage.jolinmind.cn/public/api/index/cusupload"
       
        :on-change="handleChange"
        multiple
        :file-list="fileList"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">上传询价文件</div>
      </el-upload>
    <el-divider></el-divider>
      <van-button type="info" class="mt2" size="small" @click="sub">提交询价</van-button>

          </div>
          <div class="col-xs-12 col-sm-12 col-md-6">
            询价文件示例:
             <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="计量询价" name="first">
      <img src="@/assets/xun/ji.png" class="img"/>
      </el-tab-pane>
    <el-tab-pane label="检测询价" name="second">
      <img src="@/assets/xun/jian_xj.png" class="img"/>
    </el-tab-pane>
    <el-tab-pane label="设备询价" name="third">
       <img src="@/assets/xun/sb.png" class="img"/>
    </el-tab-pane>
    <el-tab-pane label="维修询价" name="fourth">
       <img src="@/assets/xun/weixiu.png" class="img"/>
      </el-tab-pane>
  </el-tabs>
            <!-- <div id="map" class="wow zoomIn"></div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { WOW } from 'wowjs'
import BMap from "BMap";
import { Button } from 'vant';
export default {
  name: "ContactUs",
  data() {
    return {
        activeName: 'first',
        cp_name:'',
        cp_call:'',
        fileList: [],
        user:'',
    };
  },
  methods:{
    sub(){
      console.log(this.cp_name,this.cp_call,this.fileList);
      let {cp_call,cp_name,fileList,user}=this;
       if(!cp_name){
        alert('请输入产品名称') ; return;
      }
      if(!cp_call){
        alert('请输入联系方式') ; return;
      }
      if(!fileList){
         alert('请上传文件') ; return;
      }
     let ff=[];
     for(let i of fileList){
        ff.push(i.response.data);
     };
     console.log('ff:',ff,ff.toString());
     let data={
       uid:user[0].id,
       urls:ff.toString(),
       products:cp_name,
       phones:cp_call
     };
     this.http.post('/cusmsg/newaskmsg',data).then(res=>{
       console.log('res65:',res);
       if(res.data.code==1){
          alert(res.data.msg)
       };
     })

    },
     handleClick(tab, event) {
        console.log(tab, event);
      },
       handleChange(file, fileList) {
      this.fileList = fileList;
      // console.log('666:',fileList)
    },
  },
  mounted() {
    let suer= JSON.parse(localStorage.getItem('user'));
    this.user=suer;

    var map = new BMap.Map("map"); // 创建地图实例
    // 114.57636,30.73515
    var point = new BMap.Point(114.57636,30.73515); // 创建点坐标
    map.centerAndZoom(point, 18); // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    var marker = new BMap.Marker(point); // 创建标注
    map.addOverlay(marker); // 将标注添加到地图中
    var opts = {
      width: 50, // 信息窗口宽度
      height: 10, // 信息窗口高度
      title: "湖北原测通科技有限公司" // 信息窗口标题
    };
    var infoWindow = new BMap.InfoWindow(
      "",
      opts
    ); // 创建信息窗口对象
    map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
    var wow = new WOW();
    wow.init();
  }
};
</script>
<style scoped>
.img{
  width: 35vw;
  height: 100%;
}
.banner {
  color: #fff;
  font-size: 30px;
  height: 150px;
  line-height: 150px;
  background-image: url("../assets/img/banner_1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}
.ContactUs-container {
  padding: 80px 0;
  transition: all ease 0.5s;
  box-sizing: border-box;
}
#map {
  width: 100%;
  height: 365px;
}
.row {
  margin-right: 0;
  margin-left: 0;
}
@media screen and (max-width: 997px) {
  .ContactUs-container {
    padding: 20px 0;
  }
}
</style>

